<template>
    <!--能耗增速-->
    <div class="statistics_energy_growth_rate">
        <CommonTitleComponent text="月度能耗量及环比增速">
            <div class="tabswitch">
                <div v-for="(item,index) in state.tablist" :key="index" :class="state.isactive===index?'isactive':''"
                     @click="state.isactive=index">
                    {{ item.name }}
                </div>
            </div>
        </CommonTitleComponent>
        <div class="statistics_energy_growth_rate_echarts">
            <chart-view
                :chart-option="EchartsMethods.energyElectric(state.chartData)"
                :auto-resize="true"
                height="100%"
                style="height: 100%"
            ></chart-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import {EchartsMethods} from "@/chart/index";
const state = reactive({
    tablist: [
        {name: '水'},
        {name: '电'},
        {name: '气'}
    ],
    isactive: 0,
    chartData: {
        wname: '用水量',
        watercompanyname: '单位：m³',
        waterlegname: '用水量（t）',
        watercolor: 'rgba(144, 253, 226, 1)',
        tercolor: 'rgba(1, 157, 151, 1)',
        wateritemcolor: 'rgba(40, 122, 198, 1)',
        waterlinecolor: 'rgba(40, 122, 198, 1)',
        type: 'water'
    }
})
</script>

<style scoped lang="scss">
.statistics_energy_growth_rate {
    padding-top: 20px;
    height: 100%;
    .tabswitch {
        display: flex;
        justify-content: space-between;
        align-items: center;
        >div{
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: rgba(27, 147, 251, .2);
            border-radius: 10px;
            font-size: 12px;
            color: #FFFFFF;
            margin-right: 8px;
            cursor: pointer;
            &:last-child{
                margin-right: 0;
            }
        }
        .isactive{
            background: #447AB8;
        }
    }
    &_echarts{
        height: 92%;
        padding-top: 10px;
    }
}
</style>